<igx-grid *ngIf="!recursiveHierarchy" #grid id="grid" class="igx-scrollbar"
    [displayDensity]="styling?.appearance?.displayDensity"
    [width]="'100%'"
    [data]="localData$ | async"
    [isLoading]="isLoading$ | async"
    [rowSelection]="options?.rowSelection"
    [allowFiltering]="options?.allowFiltering"
    [filterMode]="options?.filterMode"
    [allowAdvancedFiltering]="options?.allowAdvancedFiltering"
    [columnSelection]="options?.columnSelection"
    [paging]="options?.paging"
    [perPage]="options?.perPage"
    (columnSelectionChanging)="onColumnSelectionChanging($event)"
>

    <ng-container *ngFor="let row of rows$ | async">
        <igx-column-group [header]="row.label" *ngIf="row.columns;else col"
            [movable]="true"
            [pinned]="true"
            [collapsible]="true"
            [expanded]="false"
            [resizable]="true"
        >
            <ng-container *ngFor="let field of row.columns">
                <igx-column 
                    [field]="field.caption || field.name"
                    [header]="field.label || field.name"
                    [visibleWhenCollapsed]="field.isSummary"
                    [cellClasses]="field.cellClasses"
                    [filterable]="true"
                    [movable]="true"
                    [pinned]="true"
                    [resizable]="true"
                ></igx-column>

                <ng-container *ngIf="field.properties">
                    <igx-column *ngFor="let property of field.properties"
                        [field]="property.name"
                        [header]="property.label || property.name"
                        [filterable]="true"
                        [movable]="true"
                        [pinned]="true"
                        [resizable]="true"
                    ></igx-column>
                </ng-container>
            </ng-container>
        </igx-column-group>

        <ng-template #col>
            <igx-column
                [movable]="true"
                [pinned]="true"
                [resizable]="true"
                [field]="$any(row).caption || $any(row).name"
                [header]="$any(row).label || $any(row).name"
                [filterable]="true"
                [cellClasses]="row.cellClasses"
            >
            </igx-column>

            <ng-container *ngIf="$any(row).properties">
                <igx-column *ngFor="let property of $any(row).properties | keyvalue"
                    [movable]="true"
                    [pinned]="true"
                    [resizable]="true"
                    [field]="$any(property).value.name"
                    [header]="$any(property).value.label || $any(property).value.name"
                    [filterable]="true"
                ></igx-column>
            </ng-container>
        </ng-template>
        
    </ng-container>

    <ng-container *ngFor="let level0Column of columns$ | async">
        <ng-container *ngIf="level0Column.columns">
            <igx-column-group [header]="level0Column.label" [collapsible]="collapsible">
                <ng-template igxCollapsibleIndicator let-column="column">
                    <igx-icon [attr.draggable]="false">{{column.expanded ? 'expand_more' : 'chevron_right'}} </igx-icon>
                </ng-template>

                <ng-container *ngFor="let level1Column of level0Column.columns; trackBy:trackByName">
                    <igx-column-group *ngIf="!!level1Column.columns"
                        [collapsible]="collapsible"
                        [header]="level1Column.label"
                        [visibleWhenCollapsed]="level1Column.isSummary"
                    >
                        <ng-container *ngFor="let level2Column of level1Column.columns; trackBy:trackByName">
                            <igx-column-group *ngIf="!!level2Column.columns"
                                [collapsible]="collapsible"
                                [header]="level2Column.label"
                                [visibleWhenCollapsed]="level2Column.isSummary"
                            >
                                <ng-container *ngFor="let level3Column of level2Column.columns; trackBy:trackByName">
                                    <igx-column-group *ngIf="!!level3Column.columns"
                                        [collapsible]="collapsible"
                                        [header]="level3Column.label"
                                        [visibleWhenCollapsed]="level3Column.isSummary"
                                    >
                                        <ng-container *ngFor="let level4Column of level3Column.columns; trackBy:trackByName">
                                            <igx-column
                                                [field]="level4Column.name"
                                                [header]="level4Column.label"
                                                [visibleWhenCollapsed]="level4Column.isSummary"
                                                dataType="number"
                                            ></igx-column>
                                        </ng-container>
                                    </igx-column-group>
                
                                    <igx-column *ngIf="!level3Column.columns"
                                        [field]="level3Column.name"
                                        [header]="level3Column.label"
                                        [visibleWhenCollapsed]="level3Column.isSummary"
                                        dataType="number"
                                    ></igx-column>
                                </ng-container>
                            </igx-column-group>
        
                            <igx-column *ngIf="!level2Column.columns"
                                [field]="level2Column.name"
                                [header]="level2Column.label"
                                [visibleWhenCollapsed]="level2Column.isSummary"
                                dataType="number"
                            ></igx-column>
                        </ng-container>
                    </igx-column-group>
                    
                    <igx-column *ngIf="!level1Column.columns"
                        [field]="level1Column.name"
                        [header]="level1Column.label"
                        [visibleWhenCollapsed]="level1Column.isSummary"
                        dataType="number"
                    ></igx-column>
                </ng-container>
            </igx-column-group>
        </ng-container>

        <igx-column *ngIf="!level0Column.columns"
            [field]="level0Column.name"
            [dataType]="$any(level0Column.dataType)"
            [header]="level0Column.label"
            [visibleWhenCollapsed]="level0Column.isSummary"

        ></igx-column>
    </ng-container>

    <ng-template igxToolbarCustomContent>
        <button igxButton="flat" igxRipple [igxRippleCentered]="true">
            <igx-icon fontSet="material">settings</igx-icon>
        </button>
    </ng-template>

    <igx-grid-toolbar *ngIf="options?.showToolbar" [displayDensity]="styling?.appearance?.displayDensity">
        <igx-grid-toolbar-title>{{title}}</igx-grid-toolbar-title>
        
        <igx-grid-toolbar-actions>
            <ng-content select=".smart-grid__toolbar-action"></ng-content>
            <igx-grid-toolbar-pinning *ngIf="options?.columnPinning"
                title="Grid pinned columns"
                prompt="Filter column collection"
                columnListHeight="400px"
            >
            </igx-grid-toolbar-pinning>
            <igx-grid-toolbar-hiding *ngIf="options?.columnHiding"></igx-grid-toolbar-hiding>
            <igx-grid-toolbar-advanced-filtering *ngIf="options?.allowAdvancedFiltering"></igx-grid-toolbar-advanced-filtering>
            <igx-grid-toolbar-exporter *ngIf="options?.exportExcel || options?.exportCsv"
                [exportCSV]="options?.exportCsv"
                [exportExcel]="options?.exportExcel"
            >
                <span excelText>导出到 Excel 文件</span>
                <span csvText>导出到 CSV 文件</span>
            </igx-grid-toolbar-exporter>
        </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
</igx-grid>

<!-- ----------------------------------------- Tree Grid ----------------------------------------------------------- -->

<igx-tree-grid *ngIf="recursiveHierarchy" #treegrid class="igx-scrollbar"
    [displayDensity]="styling?.appearance?.displayDensity"
    [isLoading]="isLoading$ | async"
    [data]="localData$ | async"
    [primaryKey]="recursiveHierarchy.valueProperty"
    [foreignKey]="recursiveHierarchy.parentNodeProperty"
    [rowSelection]="options?.rowSelection"
    [allowFiltering]="options?.allowFiltering"
    [filterMode]="options?.filterMode"
    [allowAdvancedFiltering]="options?.allowAdvancedFiltering"
    [columnSelection]="options?.columnSelection"
    [paging]="options?.paging"
    [perPage]="options?.perPage"
    (onSelection)='onSelection($event)'>

    <ng-container *ngFor="let row of rows$ | async">
        <igx-column-group header="Rows" *ngIf="isArray(row);else col"
            [movable]="true"
            [pinned]="true"
            [collapsible]="true"
        >
            <ng-container *ngFor="let field of row">
                <igx-column 
                    [field]="field.caption || field.name"
                    [dataType]="field.caption ? 'string' : field.dataType"
                    [header]="field.label || field.name"
                    [cellClasses]="field.cellClasses"
                    [filterable]="true"
                    [movable]="true"
                    [pinned]="true"
                    [resizable]="true"
                ></igx-column>

                <ng-container *ngIf="field.properties">
                    <igx-column *ngFor="let property of field.properties"
                        [field]="property.name"
                        [dataType]="property.dataType"
                        [header]="property.label || property.name"
                        [filterable]="true"
                        [movable]="true"
                        [pinned]="true"
                        [resizable]="true"
                    ></igx-column>
                </ng-container>
            </ng-container>
        </igx-column-group>

        <ng-template #col>
            <igx-column
                [movable]="true"
                [pinned]="true"
                [resizable]="true"
                [field]="$any(row).caption || $any(row).name"
                [dataType]="$any(row).caption ? 'string' : $any(row).dataType"
                [header]="$any(row).label || $any(row).name"
                [filterable]="row.filterable"
                [cellClasses]="row.cellClasses"
            >
            </igx-column>

            <ng-container *ngIf="$any(row).properties">
                <igx-column *ngFor="let property of $any(row).properties | keyvalue"
                    [movable]="true"
                    [pinned]="true"
                    [resizable]="true"
                    [field]="$any(property).value.name"
                    [dataType]="$any(property).value.dataType"
                    [header]="$any(property).value.label || $any(property).value.name"
                    [filterable]="true"
                ></igx-column>
            </ng-container>
        </ng-template>
        
    </ng-container>

    <igx-column-group *ngFor="let level0Column of columns$ | async" [header]="level0Column.label" [collapsible]="collapsible">
        <ng-template igxCollapsibleIndicator let-column="column">
            <igx-icon [attr.draggable]="false">{{column.expanded ? 'expand_more' : 'chevron_right'}} </igx-icon>
        </ng-template>

        <ng-container *ngIf="!!level0Column.columns">
        <ng-container *ngFor="let level1Column of level0Column?.columns; trackBy:trackByName">
            <igx-column-group *ngIf="!!level1Column.columns"
                [collapsible]="collapsible"
                [header]="level1Column.label"
                [visibleWhenCollapsed]="level1Column.isSummary"
            >
                <ng-container *ngFor="let level2Column of level1Column.columns; trackBy:trackByName">
                    <igx-column-group *ngIf="!!level2Column.columns"
                        [collapsible]="collapsible"
                        [header]="level2Column.label"
                        [visibleWhenCollapsed]="level2Column.isSummary"
                    >
                        <ng-container *ngFor="let level3Column of level2Column.columns; trackBy:trackByName">
                            <igx-column-group *ngIf="!!level3Column.columns"
                                [collapsible]="collapsible"
                                [header]="level3Column.label"
                                [visibleWhenCollapsed]="level3Column.isSummary"
                            >
                                <ng-container *ngFor="let level4Column of level3Column.columns; trackBy:trackByName">
                                    <igx-column
                                        [field]="level4Column.name"
                                        [header]="level4Column.label"
                                        [visibleWhenCollapsed]="level4Column.isSummary"
                                        dataType="number"
                                    ></igx-column>
                                </ng-container>
                            </igx-column-group>
        
                            <igx-column *ngIf="!level3Column.columns"
                                [field]="level3Column.name"
                                [header]="level3Column.label"
                                [visibleWhenCollapsed]="level3Column.isSummary"
                                dataType="number"
                            ></igx-column>
                        </ng-container>
                    </igx-column-group>

                    <igx-column *ngIf="!level2Column.columns"
                        [field]="level2Column.name"
                        [header]="level2Column.label"
                        [visibleWhenCollapsed]="level2Column.isSummary"
                        dataType="number"
                    ></igx-column>
                </ng-container>
            </igx-column-group>
            
            <igx-column *ngIf="!level1Column.columns"
                [field]="level1Column.name"
                [header]="level1Column.label"
                [visibleWhenCollapsed]="level1Column.isSummary"
                dataType="number"
            ></igx-column>
        </ng-container>
        </ng-container>

        <igx-column *ngIf="!level0Column.columns"
            [field]="level0Column.name"
            [dataType]="$any(level0Column.dataType)"
            [header]="level0Column.label"
            [visibleWhenCollapsed]="level0Column.isSummary"

        ></igx-column>
    </igx-column-group>
    
    <!-- <igx-column-group *ngIf="!!columnHeader" header="Columns" [collapsible]="collapsible">
        <ng-template igxCollapsibleIndicator let-column="column">
            <igx-icon [attr.draggable]="false">{{column.expanded ? 'expand_more' : 'chevron_right'}} </igx-icon>
        </ng-template> -->

        <!-- <ng-container *ngFor="let level1Column of columnHeader?.columns; trackBy:trackByName">
            <igx-column-group *ngIf="!!level1Column.columns"
                [collapsible]="collapsible"
                [header]="level1Column.label"
                [visibleWhenCollapsed]="level1Column.isSummary"
            >
                <ng-container *ngFor="let level2Column of level1Column.columns; trackBy:trackByName">
                    <igx-column-group *ngIf="!!level2Column.columns"
                        [collapsible]="collapsible"
                        [header]="level2Column.label"
                        [visibleWhenCollapsed]="level2Column.isSummary"
                    >
                        <ng-container *ngFor="let level3Column of level2Column.columns; trackBy:trackByName">
                            <igx-column-group *ngIf="!!level3Column.columns"
                                [collapsible]="collapsible"
                                [header]="level3Column.label"
                                [visibleWhenCollapsed]="level3Column.isSummary"
                            >
                                <ng-container *ngFor="let level4Column of level3Column.columns; trackBy:trackByName">
                                    <igx-column
                                        [field]="level4Column.name"
                                        [header]="level4Column.label"
                                        [visibleWhenCollapsed]="level4Column.isSummary"
                                        dataType="number"
                                    ></igx-column>
                                </ng-container>
                            </igx-column-group>
        
                            <igx-column *ngIf="!level3Column.columns"
                                [field]="level3Column.name"
                                [header]="level3Column.label"
                                [visibleWhenCollapsed]="level3Column.isSummary"
                                dataType="number"
                            ></igx-column>
                        </ng-container>
                    </igx-column-group>

                    <igx-column *ngIf="!level2Column.columns"
                        [field]="level2Column.name"
                        [header]="level2Column.label"
                        [visibleWhenCollapsed]="level2Column.isSummary"
                        dataType="number"
                    ></igx-column>
                </ng-container>
            </igx-column-group>
            
            <igx-column *ngIf="!level1Column.columns"
                [field]="level1Column.name"
                [header]="level1Column.label"
                [visibleWhenCollapsed]="level1Column.isSummary"
                dataType="number"
            ></igx-column>
        </ng-container> -->

    <!-- </igx-column-group> -->

    <ng-template igxToolbarCustomContent>
        <button igxButton="flat" igxRipple [igxRippleCentered]="true">
            <igx-icon fontSet="material">settings</igx-icon>
        </button>
    </ng-template>

    <igx-grid-toolbar [displayDensity]="styling?.appearance?.displayDensity">
        <igx-grid-toolbar-title>{{title}}</igx-grid-toolbar-title>
        
        <igx-grid-toolbar-actions>
            <ng-content select=".smart-grid__toolbar-action"></ng-content>
            <igx-grid-toolbar-pinning *ngIf="options?.columnPinning"
                title="Grid pinned columns"
                prompt="Filter column collection"
                columnListHeight="400px"
            >
            </igx-grid-toolbar-pinning>
            <igx-grid-toolbar-hiding *ngIf="options?.columnHiding"></igx-grid-toolbar-hiding>
            <igx-grid-toolbar-advanced-filtering *ngIf="options?.allowAdvancedFiltering"></igx-grid-toolbar-advanced-filtering>
            <igx-grid-toolbar-exporter *ngIf="options?.exportExcel || options?.exportCsv"
                [exportCSV]="options?.exportCsv"
                [exportExcel]="options?.exportExcel"
            >
                <span excelText>Custom text for the excel export entry</span>
                <span csvText>Custom text for the CSV export entry</span>
            </igx-grid-toolbar-exporter>
        </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
</igx-tree-grid>
